<template>
  <div id="loginBg">
  <div class="login">
    <h2>请登录</h2>
    <div>
      <el-row>
        <el-input v-model="username" placeholder="请输入用户名" @keydown.enter.native="userLogin2"></el-input>
      </el-row>
      <el-row>
        <el-input v-model="password" placeholder="请输入密码" show-password @keydown.enter.native="userLogin2"></el-input>
      </el-row>
      <el-row class="btnLoginRow">
        <el-button id="btnLogin" type="primary" @click="userLogin2">登录</el-button>
        <el-button id="btnReg" type="default" @click="goRegistration">忘记密码？</el-button>
      </el-row>
    </div>
  </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      username: 'user',
      password: '123456'
    }
  },
  components: {
  },
  mounted() {

  },
  methods: {
    ...mapActions(['userLogin']),
    goRegistration() {
      this.$router.push('/');
    },
    userLogin2() {
      if (this.username.length > 0 && this.password.length > 0) {
        let username = this.username
        let password = this.password
        this.userLogin({ username, password }).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              message: '登录成功',
              type: 'success',
              duration: 1000
            });
          }else{
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000
            });
          }
        })
      } else {
        this.$message.error('请输入正确的用户名及密码');
      }
    }
  }

}
</script>

<style scoped>
html,
body {
  width: 100%;
  height: 100%;
}
#loginBg {
  width: 100%;
  height: 100%;
  background-image: url(../assets/背景.jpg);
  background-size: cover;
}
.el-button+.el-button {
  margin-left: 0px;
}

#btnLogin {
  margin-right: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 50px;
}

.login {
  box-sizing: border-box;
  width: 400px;
  /* margin: 100px auto; */
  padding: 30px;
  position: absolute;
  left: calc(50% - 200px);
  top: calc(50% - 160px);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.el-row {
  margin-bottom: 20px;
}

#btnLogin {
  width: 100px;
}

.btnLoginRow {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
